import React, { useEffect } from "react";
import axios from "axios";
import { getGoodsInfo } from "../../api/goods";
import type { GoodsResponse } from "../../api/goods/types";

// http://api.xiaohigh.com/goods
export default function AxiosCom() {
  //声明一个商品数据状态   useState 是一个泛型函数, 类型参数就是在设置『参数值的类型』
  const [goods, setGoods] = React.useState<GoodsResponse>([]);

  useEffect(() => {
    //声明一个函数
    const getData = async () => {
      //axios.get 本身也是一个泛型函数
      let result = await getGoodsInfo();
      //更新 goods 状态
      setGoods(result);
    };
    getData();
  }, []);
  
  return (
    <ul>
      {goods.map(item => {
        return <li key={item.id}>{item.title}</li>;
      })}
    </ul>
  );
}
